<template>
  <div class="line_main"></div>
</template>

<script>
import * as echarts from 'echarts'
import {onMounted} from "vue";
export default {
  name: "LineBar",
  setup(){
    // 加载函数
    onMounted(()=>{
      console.log(123)
      const chart = echarts.init(document.querySelector(".line_main"));
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        toolbox: {
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          data: ['Evaporation', 'Precipitation', 'Temperature']
        },
        xAxis: [
          {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: 'Precipitation',
            min: 0,
            max: 250,
            interval: 50,
            axisLabel: {
              formatter: '{value} ml'
            }
          },
          {
            type: 'value',
            name: 'Temperature',
            min: 0,
            max: 25,
            interval: 5,
            axisLabel: {
              formatter: '{value} °C'
            }
          }
        ],
        series: [
          {
            name: 'Evaporation',
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' ml';
              }
            },
            data: [
              2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
            ]
          },
          {
            name: 'Temperature',
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' °C';
              }
            },
            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
          }
        ]
      };
      chart.setOption(option)

      let data =  [9633977.666666666, 22374682.0, 960814.6666666666, 480475.0, 415101.3333333333, 4840970.0, 7872072.0, 804703.3333333334, 204410.33333333334, 79127.0, 32835.0, 15727.666666666666, 10006.333333333334, 4360.0, 610.0, 500.0, 270.6666666666667, 157.66666666666666, 137.66666666666666, 143.66666666666666, 807.0, 164.33333333333334]
      console.log(data.length)
      let da = [0.1883172400335945, 0.47596729774257973, 0.020195681190778747, 0.00996207070662492, 0.008708186347676672, 0.09894353994155908, 0.17149784835545678, 0.01831390644663643, 0.004685799228318921, 0.0018631731784257012, 0.0007925488374108864, 0.0003709495403145582, 0.0002122824939619427, 9.47436974414435e-05, 1.8575721549591334e-05, 1.5245726712500562e-05, 7.97384990111819e-06, 4.589086190445413e-06, 3.869696634043681e-06, 4.126807768827917e-06, 1.5170528171275735e-05, 5.180842291881887e-06]
      console.log(da.length)
    });
    return{}
  }
}
</script>

<style scoped>
.line_main{
  width: 100%;
  height: 100%;
  padding:0;
  margin-top: 22px;
}
</style>